<template>
  <div class="content_padding">
		<div class="container" style="position: fixed; top: 0; left: 0;">
      <span class="deviceTitle">{{ deviceTitle }}</span>
      <div class="btn">
        <el-button type="text" icon="icon iconfont iconfanhui" @click="returnPreviousPage">返回</el-button>
        <el-button type="text" icon="el-icon-position" @click="submitFormInfo">提交</el-button>
      </div>
    </div>

		<div class="device_info">
			<div class="title">基本信息</div>
			<div class="basic_info">
        <div class="info_box">
          <span class="txt">企业名称：</span>
          <el-input v-model="formInfo.companyName" size="medium" class="input-width" placeholder="请输入" />
        </div>
				<div class="info_box">
					<span class="txt">设备名称：</span>
					<el-input v-model="formInfo.name" size="medium" class="input-width" placeholder="请输入" />
				</div>
				<div class="info_box">
					<span class="txt">序列号：</span>
					<el-input v-model="formInfo.deviceSn" size="medium" class="input-width" placeholder="请输入" />
				</div>
        <div class="info_box">
          <span class="txt">标段：</span>
          <el-select
            class="input-width"
            size="medium"
            v-model="formInfo.bidSection"
            placeholder="请选择"
            @change="getWorkAreaList(null)">
            <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div class="info_box">
          <span class="txt">所属工区：</span>
          <el-select class="input-width" size="medium" v-model="formInfo.areaId" placeholder="请选择">
            <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
				<div class="info_box">
					<span class="txt">出入口设置：</span>
					<el-select v-model="formInfo.inOutType" size="medium" class="input-width" placeholder="请选择">
						<el-option v-for="item in deviceUse" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
				<div class="info_box">
					<span class="txt">设备地址：</span>
					<el-input v-model="formInfo.address" size="medium" class="input-width" placeholder="请输入" />
				</div>
			</div>
		</div>

		<div class="device_info">
			<div class="title">配置信息</div>
			<div class="basic_info">
        <div class="info_box">
					<span class="txt">设备IP：</span>
					<el-input v-model="formInfo.ip" class="input-width" size="medium" placeholder="请输入" />
				</div>
        <div class="info_box">
          <span class="txt">代理：</span>
          <el-input v-model="formInfo.agent" class="input-width" size="medium" placeholder="请输入" />
        </div>
				<div class="info_box">
					<span class="txt">活体检测：</span>
					<el-select v-model="formInfo.recRank" size="medium" class="input-width" placeholder="请选择">
						<el-option v-for="item in bioAssay" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
				<div class="info_box">
					<span class="txt">识别距离：</span>
					<el-select v-model="formInfo.identifyDistance" size="medium" class="input-width" placeholder="请选择">
						<el-option v-for="item in discernDistance" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
				<div class="info_box">
					<span class="txt">语音模式：</span>
					<el-select v-model="formInfo.ttsModType" size="medium" class="input-width" placeholder="请选择">
						<el-option v-for="item in config" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import HttpInterface from "../../util/httpInterface";
import Constants from "../../util/constants";
import { mapState, mapActions } from "vuex";

export default {
  components: {},
  data() {
		return {
			deviceTitle: "添加人脸设备",
      formInfo: {
        name: "",
        deviceSn: "",
        inOutType: 1,
        address: "",
        identifyDistance: 0,
        ttsModType: 2,
        recRank: 1,
        ip: "",
        companyName: "",
        bidSection: "",
        agent: "",
        areaId: "",
        saveLogDays: Constants.DEVICE_FACE
      },
			deviceUse: Constants.DEVICE_USE,
			discernDistance: Constants.BIO_ASSAY,
			config: Constants.CONFIG,
			bioAssay: Constants.FACE_DISCERN,
			screen: Constants.SCREEN,
      workAreaInfo: [],
		};
	},

  computed: {
    ...mapState(["biaoduanList"])
  },

  methods: {
    ...mapActions(["selectByBidSection"]),

    // 返回上一级页面
    returnPreviousPage () {
      this.$parent.subPage = 0;
    },

    getWorkAreaList(areaId) {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.formInfo.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
          if (areaId) {
            _this.formInfo.areaId = areaId;
          } else {
            _this.formInfo.areaId = "";
          }
        }
      })
    },

		resetDeviceData (id) {
			this.formInfo = {
			  name: "",
			  deviceSn: "",
			  inOutType: 1,
			  address: "",
			  identifyDistance: 0,
			  ttsModType: 2,
			  recRank: 1,
			  ip: "",
			  companyName: "",
        bidSection: "",
        agent: "",
        areaId: "",
        saveLogDays: Constants.DEVICE_FACE
      };
			this.id = 0;
      if (id) {
        this.id = id;
        this.deviceTitle = "编辑人脸设备";
        this.getDeviceFaceInfo(id);
      } else {
        this.deviceTitle = "添加人脸设备";
      }
		},

    verifyFormInfo() {
      let { companyName, name, deviceSn, bidSection, inOutType, address } = this.formInfo;
      let { ip, agent, recRank, identifyDistance, ttsModType, areaId } = this.formInfo;

      if (!companyName) return this.warningMessage("请输入企业名称");

      if (!name) return this.warningMessage("请输入设备名称");

      if (!deviceSn) return this.warningMessage("请输入序列号");

      if (!bidSection) return this.warningMessage("请选择标段");

      if (!areaId) return this.warningMessage("请选择所属工区");

      if (!inOutType) return this.warningMessage("请选择出入口");

      if (!ip) return this.warningMessage("请输入设备IP");

      if (!agent) return this.warningMessage("请输入代理");

      if (!recRank) return this.warningMessage("请选择活体检测");

      if (typeof identifyDistance !== "number") return this.warningMessage("请选择识别距离");

      if (!ttsModType) return this.warningMessage("请选择语音模式");

      return true;
    },

    submitFormInfo () {
      if (!this.verifyFormInfo()) return;
			let _this = this;
      let params = this.formInfo;
      let url = this.id ? HttpInterface.URL_DEVICE_EDIT : HttpInterface.URL_DEVICE_ADD;
			HttpInterface.requestPost(this, url, params, function (res) {
				var { success } = res.data;
				if (success) {
          _this.$parent.subPage = 0;
          _this.$parent.refreshListData();
          if (_this.id) {
            _this.$message.success("编辑设备成功");
          } else {
            _this.$message.success("添加设备成功");
          }
				} else {
					_this.$message.error("操作失败");
				}
			}, null, false)
		},

		// 渲染数据
		getDeviceFaceInfo (id) {
			let _this = this;
			let params = { id };
			HttpInterface.requestGet(this, HttpInterface.URL_DEVICE_GET, params, function (res) {
				var { other } = res.data;
				_this.formInfo = other;
        _this.getWorkAreaList(other.areaId);
      }, null)
		}
	}
};
</script>

<style scoped lang="scss">
.content_padding{
  margin-top: 80px;
  padding: 0 20px;

  .device_info{
    margin-top: 30px;

    .basic_info{
      display: flex;
      margin-top: 26px;
      flex-wrap: wrap;
    }

    .title{
      width: 100%;
      font-weight: bold;
      line-height: 50px;
      display: inline-block;
      border-bottom: 1px solid rgb(236, 236, 236);
    }
  }
}

.info_box{
  margin: 10px 56px;

  .txt{
    font-size: 14px;
    width: 90px;
    display: inline-block;
    text-align: right;
  }
}

.input-width{
  width: 230px;
}

.el-button--text >>> .iconfanhui{
  margin-right: 4px;
  font-size: 18px;
  vertical-align: -2px;
}
</style>
